<template>
	<view class="container">
		<!-- 顶部切换按钮和统计 -->
		<view class="header">
			<!-- 时间范围切换 -->
			<view class="time-switch">
				<view class="switch-item" :class="{ active: timeRange === 'day' }" @tap="switchTimeRange('day')">日
				</view>
				<view class="switch-item" :class="{ active: timeRange === 'month' }" @tap="switchTimeRange('month')">月
				</view>
			</view>
			<view v-if="timeRange==='day'">
				<!-- 项目统计 -->
				<view class="stats-section">
					<view class="stats-header">
						<text>参与任务:{{totalTasks}}个</text>
					</view>
					<view class="stats-content">
						<view class="stat-item" @click="changeCardStatus('进行中')">
							<text class="number">{{UnTasks}}</text>
							<text class="label">待完成</text>
						</view>
						<view class="stat-divider"></view>
						<view class="stat-item" @click="changeCardStatus('已完成')">
							<text class="number">{{completedTasks}}</text>
							<text class="label">已完成</text>
						</view>
						<view class="stat-divider"></view>
						<view class="stat-item">
							<text class="number">{{completionRate}}</text>
							<text class="label">完成率</text>
						</view>
					</view>
				</view>

				<!-- 任务列表 -->
				<task_cardVue ref="taskCard" :status="card_status" @change="getTaskStatusNum"
					@confirmChange="getTaskStatusNum()">
				</task_cardVue>
			</view>
			<view v-else>
				<d_calendar-vue :tasks="taskList"></d_calendar-vue>
			</view>
		</view>
	</view>
</template>

<script>
	import task_cardVue from '../../component/task_card.vue';
	import api from '../../api/api';
	import d_calendarVue from '../../component/d_calendar.vue';
	export default {
		components: {
			task_cardVue,
			d_calendarVue
		},
		data() {
			return {
				timeRange: 'day', // 'day', 'month'
				totalTasks: 0,
				UnTasks: 0,
				completedTasks: 0,
				completionRate: '-',
				currentDate: '',
				card_status: '进行中',
				taskList: null
			}
		},
		onShow() {
			this.getTaskStatusNum()
			this.getAllTasks()
		},
		methods: {
			switchTimeRange(range) {
				this.timeRange = range
				// if (range === 'month') {
				// 	// uni.showToast({
				// 	// 	title: '正在开发中，敬请期待⭐',
				// 	// 	icon: 'none'
				// 	// })
				// 	// this.timeRange = "day"
				// }
			},
			changeCardStatus(status) {
				this.card_status = status
			},
			getTaskStatusNum() {
				// 重置计数器，避免重复累加
				this.totalTasks = 0
				this.UnTasks = 0
				this.completedTasks = 0

				api.getTaskStatusNum().then(re => {
					const data = re.data.data
					data.forEach(one => {
						if (one.status !== '已取消') {
							this.totalTasks += one.num
						}
						// 使用 === 进行比较
						if (one.status === '进行中') {
							this.UnTasks = one.num
						} else if (one.status === '已完成') {
							this.completedTasks = one.num
						}
					})
					// 移到 then 内部确保数据更新后再计算
					this.getRate()
				})
				this.$refs.taskCard.getTasks()
			},
			async getAllTasks() {
				// 显示加载状态
				this.loading = true

				try {
					const [pendingRes, completedRes, overdueRes] = await Promise.all([
						api.taskSearchAllWithUser({
							status: '进行中'
						}),
						api.taskSearchAllWithUser({
							status: '已完成'
						}),
						api.taskSearchAllWithUser({
							status: '已过期'
						})
					])

					// 合并结果
					this.taskList = [
						...(pendingRes.data.data || []),
						...(completedRes.data.data || []),
						...(overdueRes.data.data || [])
					]

				} catch (error) {
					console.error('获取任务列表失败:', error)
					uni.showToast({
						title: '获取任务列表失败',
						icon: 'none'
					})
				} finally {
					// 隐藏加载状态
					this.loading = false
				}
			},
			getRate() {
				// 确保参数为数字且有效
				const total = Number(this.totalTasks) || 0;
				const finished = Number(this.completedTasks) || 0;

				// 预防除零错误
				if (total === 0) {
					return '0%';
				}

				// 确保计算结果在 0-100 之间
				const percentage = Math.max(0, Math.min(100,
					(finished / total) * 100
				));

				// 可以选择保留一位小数
				this.completionRate = percentage.toFixed(1) + '%';
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.header {
		background-color: #ffffff;
		padding: 20rpx;
	}

	.time-switch {
		display: flex;
		justify-content: center;
		margin-bottom: 30rpx;
		background-color: #f5f5f5;
		padding: 8rpx;
		border-radius: 12rpx;
		width: 90%;
		margin: 0 auto 30rpx;
	}

	.switch-item {
		flex: 1;
		text-align: center;
		padding: 12rpx 24rpx;
		font-size: 28rpx;
		color: #666;
		border-radius: 8rpx;
		transition: all 0.3s;
	}

	.switch-item.active {
		background-color: #007AFF;
		color: #ffffff;
	}

	.stats-section {
		padding: 20rpx 0;
	}

	.stats-header {
		font-size: 48rpx;
		color: #333;
		font-weight: 700;
		margin-bottom: 20rpx;
		padding: 0 20rpx;
	}

	.stats-content {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 20rpx 0;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.stat-divider {
		width: 2rpx;
		height: 50rpx;
		background-color: #eee;
	}

	.number {
		font-size: 36rpx;
		color: #333;
		font-weight: bold;
	}

	.label {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.date-section {
		padding: 30rpx;
		text-align: center;
		color: #666;
	}

	.team-divider {
		margin: 20rpx 0;
		color: #999;
		font-size: 28rpx;
	}

	.task-section {
		background-color: #ffffff;
		margin-top: 20rpx;
	}
</style>